<template>
	<view class='box'>
		<view class="box1">
			<view class="close-btn" @click="guanbi">
				<b>X</b>
			</view>
		</view>
		<view class="box2-3">
			
		
		<view class="box2">
			<img src="https://dsfs.oppo.com/store/cn/m/img/oppo.11403ae2.png">
		</view>

		<view class="box3">
			<b>下载OPPO商城</b><br />
			官方购物平台 享新人福利
		</view>
</view>
		<view class="box4">
			<button>立即下载</button>
		</view>
	</view>

</template>

<script>
	export default {
		name: "guanggao",
		data() {
			return {

			};
		},
		methods: {
			guanbi() {
				var btn = document.querySelector('.close-btn');
				var box = document.querySelector('.box');
				btn.onclick = function() {
					box.style.display = 'none';
				}

			}
		}
	}
</script>

<style>
	.box {
		display: flex;
		position: relative;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 750rpx;
		height: 80rpx;
		border: 1ps solid #ccc;
		margin: 10px auto;
		font-size: 12px;
		text-align: center;
	}


	.box1 {
		width: 60rpx;
		height: 80rpx;
	}

.close-btn{
	margin-top: 10rpx;
}
	.box2 {
		width: 100rpx;
		height: 80rpx;
	}

	.box2 img {
		width: 60rpx;

		margin-top: -10px;
	}

.box2-3{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	.box3 {
		width: 180rpx;
		height: 80rpx;
		/* margin-top: 10rpx; */
	}

	.box4 {
		width: 150rpx;
		height: 80rpx;
	}

	.box4 button {
		font-size: 10rpx;
		color: white;
		background-color: #3E683D;
		width: 100rpx;
		margin-top: 10rpx;
	}

</style>
